<template>
    <div class="content">
        <!-- 头部 -->
        <div class="header-setting">
            <!-- 面包屑 -->
            <a-breadcrumb class="breadcrumb">
                <a-breadcrumb-item>
                    <a href="../main">首页</a>
                </a-breadcrumb-item>
                <a-breadcrumb-item>系统配置</a-breadcrumb-item>
                <a-breadcrumb-item>人员配置</a-breadcrumb-item>
            </a-breadcrumb>
            <!-- 查询条件 -->
        </div>
        <!-- 表单 -->
        <div class="box-form">
            <!-- 工具栏 -->
            <div class="box-tool">
                <div>共：XX条表单</div>
                <div style="display: flex;">
                    <div class="item-button" style="background: #0099FF; color: #fff;">创建</div>
                    <div class="item-button" style="background: #2ACD60; color: #fff;">编辑</div>
                    <div class="item-button" style="background: #EF5252; color: #fff;">删除</div>
                    <div class="item-button" style="background: #FFA032; color: #fff;">导出</div>
                </div>
            </div>

            <!-- 表单 -->
            <div class="form-detail">
                <!-- columns 列名 | 数据名字 -->
                <a-table :columns="columns" :dataSource="data" :pagination="pagination" bordered>
                    <!-- 正常操作项 -->
                    <!-- 列名 name | age | address  -->
                    <!-- 插槽 name | age | address -->
                    <!-- 带数据插槽 text | record | index -->
                    <template
                            v-for="col in ['name1', 'age1', 'address1']"
                            :slot="col"
                            slot-scope="text, record, index"
                    >
                        <div style="color: #f33;" :key="col">{{text}}111</div>
                    </template>

                    <!-- 操作项 -->
                    <!-- 插槽 opertion -->
                    <!-- 带数据插槽 text | record | index -->
                    <template slot="operation1" slot-scope="text, record, index">
                        <div class="editable-row-operations">
              <span v-if="record.editable">
                <!-- key: "0" || record => object || text => object || index: 0 -->
                <a v-on:click="save(record.key)">Save</a>
              </span>
                            <span v-else>
                <a v-on:click="edit(record.key)">Edit</a>
              </span>
                        </div>
                    </template>
                </a-table>
            </div>
        </div>
    </div>
</template>

<script>
    // 标题行
    const columns = [
        {
            title: "名字", // 列名
            dataIndex: "name", // 数据json的键值, 支持a.b.c
            width: "25%", // 宽度
            scopedSlots: {customRender: "name1"} // 指定 template slot 名字
        },
        {
            title: "年龄", // 列名
            dataIndex: "age", // 数据json的键值
            width: "15%", // 宽度
            scopedSlots: {customRender: "age1"} // 指定 template slot 名字
        },
        {
            title: "地址", // 列名
            dataIndex: "address", // 数据json的键值
            width: "40%", // 宽度
            scopedSlots: {customRender: "address1"} // 指定 template slot 名字
        },
        {
            title: "操作",
            scopedSlots: {customRender: "operation1"} // 指定 template slot 名字
        }
    ];

    // 数据行
    const data = [];
    for (let i = 0; i < 100; i++) {
        data.push({
            key: i.toString(),
            name: `Edrward ${i}`,
            age: 32,
            address: `London Park no. ${i}`
        });
    }

    export default {
        name: "PersonSetting",

        data() {
            // 复制一份不占用同一份内容
            this.cacheData = data.map(item => ({...item}));
            return {
                data,
                columns,
                pagination: {
                    defaultCurrent: 1,
                    showQuickJumper: true
                }
            };
        },

        methods: {
            edit(key) {
                const newData = [...this.data];
                const target = newData.filter(item => key === item.key)[0];
                if (target) {
                    target.editable = true;
                    this.data = newData;
                }
            },

            save(key) {
                const newData = [...this.data];
                const target = newData.filter(item => key === item.key)[0];
                if (target) {
                    delete target.editable;
                    this.data = newData;
                    this.cacheData = newData.map(item => ({...item}));
                }
            }
        },

        mounted() {
        }
    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .content {
        width: 100%;
        height: 100%;
    }

    .header-setting {
        width: 100%;
        height: 174px;
        background: #fff;
    }

    .header-setting .breadcrumb {
        margin-left: 41px;
        padding-top: 15px;
    }

    /* 表单 */
    .box-form {
        padding-left: 40px;
        padding-right: 40px;
        min-height: 300px;
        background: #fff;
        margin-top: 8px;
    }

    .box-form .box-tool {
        padding-top: 11px;
        width: 100%;
        /* flex */
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .box-form .box-tool .item-button {
        width: 104px;
        height: 40px;
        border-radius: 4px;
        margin-left: 8px;
        /* flex */
        display: flex;
        align-items: center;
        justify-content: center;
        /* cursor */
        cursor: pointer;
        /* item-button */
    }

    .box-form .form-detail {
        margin-top: 12px;
    }

    .editable-row-operations a {
        margin-right: 8px;
    }
</style>
